<template>
	<uv-popup ref="popupRef" closeable mode="bottom" round="28rpx">
		<view class="person-info">
			<view class="title">租赁人信息</view>
			<scroll-view scroll-y style="height: 60vh;">
				<view class="form">
					<view class="form-item" style="flex-direction: column; align-items: flex-start;">
						<view class="label">身份证照片</view>
						<view class="uplaods">
							<view class="upload" @click="handChooseImg('identityCardFront')">
								<image v-if="queryForm.identityCardFront" :src="queryForm.identityCardFront"
									mode="aspectFill">
								</image>
								<image v-else src="../../static/zheng.png" mode=""></image>
								<text>头像面</text>
							</view>
							<view class="upload" @click="handChooseImg('identityCardTail')">
								<image v-if="queryForm.identityCardTail" :src="queryForm.identityCardTail"
									mode="aspectFill">
								</image>
								<image v-else src="../../static/fan.png" mode=""></image>
								<text>国徽面</text>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">身份证号</view>
						<view class="value">
							<input v-model="queryForm.identityNo" :cursor-spacing="cursorSpacing" type="text"
								placeholder="请填写身份证号">
						</view>
						<!-- <view class="photo">
							<image src="/static/icon/photo.png" mode=""></image>
							<text>拍照识别</text>
						</view> -->
					</view>
					<view class="form-item">
						<view class="label">联系人</view>
						<view class="value">
							<input v-model="queryForm.budgetName" :cursor-spacing="cursorSpacing" type="text"
								placeholder="请输入联系人姓名">
						</view>
					</view>
					<view class="form-item">
						<view class="label">手机号</view>
						<view class="value">
							<input v-model="queryForm.cellphone" :cursor-spacing="cursorSpacing" type="text"
								placeholder="请输入手机号">
						</view>
					</view>
					<view class="form-item">
						<view class="label">地址</view>
						<view class="value">
							<input v-model="queryForm.lesseesAddress" :cursor-spacing="cursorSpacing" type="text"
								placeholder="请输入联系人地址">
						</view>
					</view>
					<view class="form-item">
						<view class="label">驾照</view>
						<view class="uploads" @click="handChooseImg('licence')">
							<image v-if="queryForm.licence" :src="queryForm.licence" mode="aspectFill"></image>
							<image v-else src="/static/icon/upload.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="submit">
					<button class="cu-btn" @click="handSubmit">确定</button>
				</view>
			</scroll-view>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineEmits
	} from 'vue'
	import {
		doVerify
	} from '@/apis/user.js'
	import uploadFile from '@/utils/ossutil/uploadFile.js'

	const emit = defineEmits(['change'])

	const rpxToPx = (rpx) => {
		const screenWidth = uni.getSystemInfoSync().screenWidth
		return (screenWidth * Number.parseInt(rpx)) / 750
	}
	const cursorSpacing = rpxToPx(30)


	const queryForm = ref({
		identityCardFront: '',
		identityCardTail: ''
	})

	const handSubmit = () => {
		const params = queryForm.value
		if (!params.identityCardFront) {
			uni.$uv.toast('请上传身份证正面')
			return
		}
		if (!params.identityCardTail) {
			uni.$uv.toast('请上传身份证反面')
			return
		}
		if (!params.identityNo) {
			uni.$uv.toast('请输入身份证')
			return
		}
		if (!uni.$uv.test.idCard(params.identityNo)) {
			uni.$uv.toast('身份证格式不正确')
			return
		}
		if (!params.budgetName) {
			uni.$uv.toast('请输入联系人')
			return
		}
		if (!params.cellphone) {
			uni.$uv.toast('请输入手机号')
			return
		}
		if (!uni.$uv.test.mobile(params.cellphone)) {
			uni.$uv.toast('手机号格式不正确')
			return
		}
		if (!params.lesseesAddress) {
			uni.$uv.toast('请输入地址')
			return
		}
		if (!params.licence) {
			uni.$uv.toast('请上传驾照')
			return
		}
		emit('change', params)
		handClose()
	}

	const handVerify = async (tempFilePaths, src) => {
		uni.showLoading({
			title: '识别中'
		})
		try {
			const base64Url = await getUrlBase64(src)
			uni.uploadFile({
				url: 'https://apis.juhe.cn/idimage/verify',
				filePath: tempFilePaths,
				name: 'file',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				formData: {
					key: '74b2dc1f86615496f5582896b75c8213',
					side: 'front',
					image: base64Url
				},
				success: (res) => {
					uni.hideLoading()
					if (res.statusCode === 200) {
						const result = JSON.parse(res.data)
						if (result.error_code === 0) {
							if (result.result.idcard) {
								queryForm.value.identityCardFront = src
								queryForm.value.identityNo = result.result.idcard
								queryForm.value.budgetName = result.result.realname
								queryForm.value.lesseesAddress = result.result.address
							} else {
								uni.$uv.toast('图片解析失败')
							}
						} else {
							uni.$uv.toast('图片解析失败')
						}
					} else {
						uni.$uv.toast('图片解析失败')
					}
				},
				fail: (err) => {
					uni.hideLoading()
					uni.$uv.toast('图片解析失败')
				}
			})
		} catch (e) {
			console.log(e)
			uni.$uv.toast('图片解析失败')
			uni.hideLoading()
		}
	}

	const getUrlBase64 = (url) => {
		return new Promise((rel, rej) => {
			uni.request({
				url,
				method: 'GET',
				responseType: 'arraybuffer',
				success: (res) => {
					let base64 = uni.arrayBufferToBase64(res.data)
					rel(base64)
				},
				fail: (err) => {
					rej(err)
				}
			})
		})
	}

	const handChooseImg = (name) => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				uploadFile(res.tempFilePaths[0], 'images/', res.tempFilePaths[0], (src => {
					if (name === 'identityCardFront') {
						handVerify(res.tempFilePaths[0], src)
					} else {
						queryForm.value[name] = src
					}
				}), (err => {

				}), (res => {

				}))
			}
		})
	}


	const popupRef = ref(null)
	const handOpen = (row) => {
		queryForm.value = row
		popupRef.value.open()
	}
	const handClose = () => {
		popupRef.value.close()
	}
	defineExpose({
		handOpen
	})
</script>

<style lang="scss" scoped>
	.person-info {
		padding: 24rpx;
		padding-bottom: 58rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 58rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 58rpx);

		.title {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.form {
			margin-top: 64rpx;

			&-item {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #EEEEEE;
				padding: 30rpx 0;

				&:last-child {
					display: block;
					border: none;
				}

				.label {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.uplaods {
					margin-top: 24rpx;
					display: flex;
					align-items: center;

					.upload {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						&:nth-child(2) {
							margin-left: 30rpx;
						}

						image {
							width: 328rpx;
							height: 212rpx;
						}

						text {
							margin-top: 20rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
				}

				.value {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					justify-content: flex-end;

					input {
						flex: 1;
						text-align: right;
					}
				}

				.photo {
					margin-left: 36rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						margin-top: 4rpx;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}

				.uploads {
					display: flex;
					margin-top: 26rpx;

					image {
						width: 292rpx;
						height: 184rpx;
					}
				}
			}
		}

		.submit {
			margin-top: 22rpx;
			position: relative;
			z-index: 3;

			.cu-btn {
				width: 702rpx;
				height: 100rpx;
				background: #FFC434;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>